<template>
  <div class='home'>
      <!-- banner -->
      <swiper autoplay indicator-dots='true' indicator-color="rgba(0, 0, 0, .3)" indicator-active-color="white" v-show="activeBarIndex==1">
        <swiper-item v-for="(value,index) in imgList" :key="index" @click="toAdvert(value.link_url)">
          <img :src="value.img_url" class="slide-image" lazy-load/>
        </swiper-item> 
      </swiper>
      <!-- banner结束 -->

   <div class="home_content" v-show="activeBarIndex==1">

    <!-- 推荐商品区 -->
    <div class="home_content_tit">大家都在兑</div>
    <div class="introduce">
      <div class="introduce_item" v-for="(value,index) in recommendData" :key="index" @click="toGoodsDetail(value.id)">
        <div class="introduce_item_pic_wrapper">
          <img :src="value.thumb_Url" alt="" class="introduce_item_pic" mode="aspectFill" lazy-load>
        </div>
        <div class="introduce_item_name">
          {{value.name}}
        </div>
        <div class="introduce_item_credit">{{value.exchange_integral}}积分</div>
      </div>
    </div>
    <!-- 推荐商品区结束 -->
   </div>
  </div>
</template>

<script>

export default {
  data() {
    return {
      newData:[],
      recommendData:[],
      advert:'',
      imgList:'',
      page:0,
      activeBarIndex:1,
      userInfo:{
          user_info:{
            photo_url:"",
            nickname:"",
          }
        }
    }
  },
   onShareAppMessage(){
     return {
      title: 'F6能量饮微商城',
      desc:'F6功能饮、提神饮、醒酒、解酒能量饮微商城',}
    },
  methods:{
    async getGoodList(){
      wx.showLoading()
      let res=await this.$request.getData('/goods/getGoodsList',{page:this.page,limit:10,type:'integral'})
      if(res.data.level=='success'){
          res.data.data.forEach((item)=>{
            this.recommendData.push(item)
        })
        wx.hideLoading()
      }
    },
    async getBanner(){
      let res=await this.$request.getData('/other/getBannerList',{type:'integral'});
      if(res.data.level=='success'){
        this.imgList=res.data.data;
        wx.stopPullDownRefresh()
      }
    },
    async getUserInfo(){
        var userToken=wx.getStorageSync('userToken') 
        let res=await this.$request.getData('/ucenter/getUserInfo',{user_token:userToken})
        this.userInfo=res.data.data
      },
    toGoodsDetail(id){
      wx.navigateTo({url:'/pages/goodsDetail/main?id='+id+'&from=credit'})
    },
    toAdvert(url){
      let pattern=/^\/pages/
      if(pattern.exec(url)){
        this.$currency.navigateTo(url)
      }else{
        wx.navigateTo({url:'/pages/advert/main?url='+url})
      }
      
    },
    changeTabBarIndex(index){
      this.activeBarIndex=index
    }
  },
  onReachBottom(){
    this.page++;
    this.getGoodList()
  },
  onPullDownRefresh() {
    this.page=0;
    this.getBanner()
    this.getGoodList()
    this.newData=[]
    this.recommendData=[]
    // Do something when pull down.
  },
  mounted() {
    this.getBanner()
    this.getGoodList()
    this.getUserInfo()
    
  },
  onShow(){
    // this.page=0
  }
}
</script>

<style scoped>
  .home{
    width:100%;
    min-height: 100%;
  }
  .home_content{
    margin:20px 5px 0 5px;
    background: #fff;
  }
  swiper{height: 172.5px;}
.slide-image{width: 100%;height: 172.5px;}


  /* 推荐商品区 */
  .introduce{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    background: #fff;
    margin-top:20px;
  }
  .home_content_tit{
    margin-left:10px;
  }
  .introduce_item{
    width:50%;
    height: auto;
    display: flex;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap;
    margin-bottom:15px;
  }
  .introduce_item_pic_wrapper{
    width:85%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding:10px;
    border-radius: 10px;
    background: #eee;
  }
  .introduce_item_pic{
    width:85%;
    height: 150px;
    border-radius: 5px;
  }
  .introduce_item_name,.introduce_item_credit{
    margin-top:5px;
    font-size: 14px;
    text-indent: 20px;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .introduce_item_credit{
    color:red;
  }


</style>
